<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/vue.js"></script>
    <!-- 全局JS的过滤文件的加载 -->
    <script src="./js/filters.js"></script>
    <style>
        .list .user {
            width: 500px;
            display: flex;
            flex-flow: row nowrap;
            border: 1px solid #cccccc;
            box-shadow: 0px 0px 10px #cccccc;
            border-radius: 12px;
            overflow: hidden;
            margin: 10px;
        }

        .list .user .head {
            width: 150px;
            height: 150px;
            flex-shrink: 0;
            overflow: hidden;
        }

        .list .user .head img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .list .user .info {
            flex-grow: 1;
            font-size: 14px;
            line-height: 1.7;
            letter-spacing: 2px;
            list-style: none;
            padding-left: 26px;
        }

        .list .user .info span:first-child {
            display: inline-block;
            width: 80px;
            text-align: justify;
            text-align-last: justify;
            color: #007bff;
        }

        .list .user .info i {
            font-style: normal;
            padding: 0px 10px;
            color: #aaaaaa;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="list">
            <div class="user" v-for="(u, index) in users" :key="index">
                <div class="head">
                    <!-- <img :src="u.head"> -->
                    <img src="./img/user.jpg">
                </div>
                <ul class="info">
                    <li>
                        <span>姓名</span>
                        <i>:</i>
                        <span>{{ u.name }}</span>
                    </li>
                    <li>
                        <span>性别</span>
                        <i>:</i>
                        <span>{{ u.sex }}</span>
                    </li>
                    <li>
                        <span>出生日期</span>
                        <i>:</i>
                        <span>{{ u.birthday*1000 | formatDate("yyyy年MM月dd日") }}</span>
                    </li>
                    <li>
                        <span>电话</span>
                        <i>:</i>
                        <!-- <span>{{ u.phone | hideKeyChart }}</span> -->
                        <span>{{ u.phone | hideKeyChart("5:3:3","*","e") }}</span>
                    </li>
                    <li>
                        <span>身份证号码</span>
                        <i>:</i>
                        <span>{{ u.idcard | hideKeyChart("3:10:5","●","e") }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <hr>
    <div id="root">
        <div class="list">
            <div class="user" v-for="(u, index) in users" :key="index">
                <div class="head">
                    <!-- <img :src="u.head"> -->
                    <img src="./img/user.jpg">
                </div>
                <ul class="info">
                    <li>
                        <span>姓名</span>
                        <i>:</i>
                        <span>{{ u.name }}</span>
                    </li>
                    <li>
                        <span>性别</span>
                        <i>:</i>
                        <span>{{ u.sex }}</span>
                    </li>
                    <li>
                        <span>出生日期</span>
                        <i>:</i>
                        <span>{{ u.birthday*1000 | formatDate("yyyy年MM月dd日") }}</span>
                    </li>
                    <li>
                        <span>电话</span>
                        <i>:</i>
                        <span>{{ u.phone | hideKeyChart("3:5:3","●") }}</span>
                    </li>
                    <li>
                        <span>身份证号码</span>
                        <i>:</i>
                        <span>{{ u.idcard | hideKeyChart("5:8:5","●") }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    // Vue.filter 完成这个项目的 Vue全局共享过滤定义
    //  Vue.filter 容器中的使用规则 和 局部过滤 一致
    //  Vue.filter( id-name,callback ) id-name:定义一个唯一的过滤器名称 callback过滤器的回调函数
    //         + callback 定义规则和局部过滤器的 方法取值规则一致
    // Vue.filter("formatDate",function(value,fmt="yyyy-MM-dd hh:mm:ss") {
    //         // 日期对象生成
    //         let date = null;
    //         if (value instanceof Date) {
    //             date = value;
    //         } else {
    //             date = new Date(value)
    //         }
    //         // 定义获取参数对应正则表达式
    //         let o = {
    //             "M+": date.getMonth() + 1, //月份
    //             "d+": date.getDate(), //日
    //             "h+": date.getHours(), //小时
    //             "m+": date.getMinutes(), //分
    //             "s+": date.getSeconds(), //秒
    //             "w+": date.getDay(), //星期
    //             "q+": Math.floor((date.getMonth() + 3) / 3), //季度
    //             "S": date.getMilliseconds() //毫秒
    //         };
    //         // 用正则匹配日期
    //         if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    //         for (let k in o) {
    //             if (k === 'w+') {
    //                 if (o[k] === 0) {
    //                     fmt = fmt.replace('w', '周日');
    //                 } else if (o[k] === 1) {
    //                     fmt = fmt.replace('w', '周一');
    //                 } else if (o[k] === 2) {
    //                     fmt = fmt.replace('w', '周二');
    //                 } else if (o[k] === 3) {
    //                     fmt = fmt.replace('w', '周三');
    //                 } else if (o[k] === 4) {
    //                     fmt = fmt.replace('w', '周四');
    //                 } else if (o[k] === 5) {
    //                     fmt = fmt.replace('w', '周五');
    //                 } else if (o[k] === 6) {
    //                     fmt = fmt.replace('w', '周六');
    //                 }
    //             } else if (new RegExp("(" + k + ")").test(fmt)) {
    //                 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    //             }
    //         }
    //         return fmt;
    //     }
    // )

    new Vue({
        el: "#app",
        data: {
            users: [
                { name: "弘文", sex: "男", birthday: "538715232", phone: "18912345234", idcard: "342412345678900011" },
                { name: "雨泽", sex: "女", birthday: "559710432", phone: "18923456234", idcard: "342412345678900012" }
            ]
        },
        // 局部过滤定义 - 只有当前vue实例对应的容器范围内才可以使用
        filters:{
            // formatDate(value,fmt="yyyy-MM-dd hh:mm:ss") {
            //     // 日期对象生成
            //     let date = null;
            //     if (value instanceof Date) {
            //         date = value;
            //     } else {
            //         date = new Date(value)
            //     }
            //     // 定义获取参数对应正则表达式
            //     let o = {
            //         "M+": date.getMonth() + 1, //月份
            //         "d+": date.getDate(), //日
            //         "h+": date.getHours(), //小时
            //         "m+": date.getMinutes(), //分
            //         "s+": date.getSeconds(), //秒
            //         "w+": date.getDay(), //星期
            //         "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            //         "S": date.getMilliseconds() //毫秒
            //     };
            //     // 用正则匹配日期
            //     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            //     for (let k in o) {
            //         if (k === 'w+') {
            //             if (o[k] === 0) {
            //                 fmt = fmt.replace('w', '周日');
            //             } else if (o[k] === 1) {
            //                 fmt = fmt.replace('w', '周一');
            //             } else if (o[k] === 2) {
            //                 fmt = fmt.replace('w', '周二');
            //             } else if (o[k] === 3) {
            //                 fmt = fmt.replace('w', '周三');
            //             } else if (o[k] === 4) {
            //                 fmt = fmt.replace('w', '周四');
            //             } else if (o[k] === 5) {
            //                 fmt = fmt.replace('w', '周五');
            //             } else if (o[k] === 6) {
            //                 fmt = fmt.replace('w', '周六');
            //             }
            //         } else if (new RegExp("(" + k + ")").test(fmt)) {
            //             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            //         }
            //     }
            //     return fmt;
            // }
        }
    })

    new Vue({
        el: "#root",
        data: {
            users: [
                { name: "志泽", sex: "男", birthday: "538715232", phone: "18912345234", idcard: "342412345678900011" },
                { name: "擎宇", sex: "女", birthday: "559710432", phone: "18923456234", idcard: "342412345678900012" }
            ]
        }
    })
</script>

</html>